<template>
  <section class="teacherPane">
    <div class="indexTitle">
      优秀教师
    </div>
    <div class="content">
      <ul class="top6TeacherUl">
        <li v-for="(teacher,index) in teachers">
          <div class="imgDiv">
            <img :src="getImgUrl(teacher.imgsrc)">
          </div>
          <div>
            {{teacher.tname}}
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
  import api from "../../../../axios/api.js"
    export default {
        name: "teacher",
      data(){
          return {
           teachers:[]
          }
      },
      methods:{
        getImgUrl: function (imgsrc) {
          //idea edit configuration deployement add external source
          return "/api/upload/head/" + imgsrc;
        },
        dateFormat(row, column, cellValue) {
          return utilsFD.FD.Fd().dateFormatCN(cellValue,'yyyy-MM-dd',fecha);
        },
        getTop6Teacher:function () {
          api.setDataFromAxios("/api/TestWeb/teacherController/getTop6Teacher",null,"get",null).then(
            //默认返回就是response对象
            dto=>{
              this.teachers = dto.tList;
            }
          );
        },

      },
      created() {
          this.getTop6Teacher();
      }
    }

</script>

<style scoped lang="stylus">
  .teacherPane
    width 318px;
    height 280px;
  .indexTitle
    font "微软雅黑" 20px;
    height 36px;
    text-align left
  .content
    position relative
    overflow hidden
    height 388px;
    .top6TeacherUl
     position absolute;
     left -24px;
     width 342px;
     margin 0
     padding 0
     li
      font-size 12px;
      width 90px;
      list-style-type none
      margin-left 24px;
      float left
      .imgDiv
        width 90px;
        img
          width 90px;
          height 110px;
      &:after
       clear both
       content ''
       display block
</style>
